<template>
    <div>
        <el-dialog
            :title="isAdd ? '添加用户' : '编辑用户'"
            :visible.sync="isShow"
            center
            :show-close="false"
        >
            <el-form
                :model="userform"
                :rules="rules"
                label-position="right"
                label-width="100px"
                ref="userform"
            >
                <el-form-item label="所属角色" prop="roleid">
                    <el-select v-model="userform.roleid" placeholder="请选择">
                        <el-option
                            v-for="item in rolelist"
                            :key="item.id"
                            :label="item.rolename"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名称" prop="username">
                    <el-input v-model="userform.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input
                        v-model="userform.password"
                        show-password
                    ></el-input>
                </el-form-item>

                <el-form-item label="状态">
                    <el-switch
                        v-model="userform.status"
                        active-color="#13ce66"
                        :active-value="1"
                        :inactive-value="2"
                    ></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit" v-if="isAdd"
                    >添 加</el-button
                >
                <el-button type="primary" @click="submit" v-else
                    >修 改</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Vuex from "vuex";
export default {
    data() {
        return {
            //表单的验证规则
            rules: {
                roleid: {
                    required: true,
                    message: "请选择所属角色",
                    trigger: "blur",
                },
                username: [
                    {
                        required: true,
                        message: "请输入用户名称",
                        trigger: "blur",
                    },
                    {
                        min: 2,
                        max: 6,
                        message: "长度在 2 到 6 个字符",
                        trigger: "blur",
                    },
                ],
            },
            defaultProps: {
                children: "children",
                label: "title",
            },
        };
    },
    props: ["isDialog", "isAdd"],
    methods: {
        ...Vuex.mapMutations({
            //设置一条数据 也就是设置弹框的数据
            setuserinfo: "user/setuserinfo",
        }),

        ...Vuex.mapActions({
            getlist: "user/userlist_a", //获取用户列表 接口
            useradd: "user/useradd_a", //获取用户添加 接口
            useredit: "user/useredit_a", //获取用户添加 接口
            rolelist_a: "role/rolelist_a", //获取角色列表 接口
            usercount: "user/usercount_a", //获取用户总数 接口
        }),
        //点击取消 弹框消失
        cancel() {
            this.$emit("cancel", false);
            this.reset();
        },
        //reset 重置弹框表单的数据
        reset() {
            this.setuserinfo({
                uid: 0,
                roleid: "",
                username: "",
                password: "",
                status: 1,
            });
        },

        //点击用户类型 取消上级用户
        noPid(i) {
            this.userform.pid = i;
        },
        //点击添加或修改按钮提交
        submit() {
            //通过验证器判断是否符合rules规则
            this.$refs.userform.validate((vaild) => {
                if (vaild) {
                    //vuex方法,需要去watch监听事件的变化
                    if (this.isAdd) {
                        this.useradd(this.userform);
                    } else {
                        this.useredit(this.userform);
                    }
                } else {
                    this.$message.error("输入有误");
                    this.reset();
                    return false;
                }
            });
        },
    },
    computed: {
        //获取用户列表
        ...Vuex.mapGetters({
            rolelist: "role/getrolelist",
            userform: "user/getuserinfo",
            userTitle: "user/getuserTitle",
            page: "user/getPage",
        }),
        //接收传递来的prop属性，
        isShow: {
            get() {
                return this.isDialog;
            },
            set() {
                this.$emit("cancel", false);
            },
        },
    },
    watch: {
        //监听输出的内容是否变化，list组件也会受影响
        userTitle(val) {
            if (val.code == 200) {
                this.$message.success(val.msg);
                this.cancel();
            } else {
                this.$message.error(val.msg);
                this.reset();
            }
            //调用 用户总数 接口
            this.usercount();
            // 调用 获取列表 接口
            this.getlist(this.page);
        },
    },
    mounted() {
        this.rolelist_a();
    },
};
</script>

<style scoped></style>
